<template>
  <custom-layout :isTabBar="false" navTitle="修改字段数据">
    <view class="update">
      <view class="form-card">
        <uni-forms ref="valiForm" :modelValue="model" :rules="rules" label-position="top">
          <uni-forms-item name="dictLabel" label="字典标签">
            <uni-easyinput type="text" v-model="model.dictLabel" placeholder="请输入字典标签" />
          </uni-forms-item>
          <uni-forms-item name="dictValue" label="字典键值">
            <uni-easyinput type="text" v-model="model.dictValue" placeholder="请输入字典键值" />
          </uni-forms-item>
          <uni-forms-item name="dictSort" label="显示顺序">
            <uni-number-box v-model="model.dictSort" />
          </uni-forms-item>
          <uni-forms-item name="cssClass" label="样式属性">
            <uni-easyinput type="text" v-model="model.cssClass" />
          </uni-forms-item>
          <uni-forms-item name="listClass" label="表格样式">
            <uni-easyinput type="text" v-model="model.listClass" />
          </uni-forms-item>
          <uni-forms-item name="status" label="字典状态">
            <uni-data-checkbox v-model="model.status" :localdata="localdata" />
          </uni-forms-item>
        </uni-forms>
        <button type="primary" @click="handleSubmit('valiForm')">提交</button>
      </view>
    </view>
  </custom-layout>
</template>

<script>
import { getDictData, updateDictData } from "@/api/system/dictData";
export default {
  data() {
    return {
      model: {
        status: 0,
        dictSort: 1,
      },
      localdata: [
        { text: "正常", value: 0 },
        { text: "停用", value: 1 },
      ],
      rules: {
        dictLabel: {
          rules: [{ required: true, errorMessage: "请输入字典标签" }],
        },
        dictValue: {
          rules: [{ required: true, errorMessage: "请输入字典键值" }],
        },
      },
    };
  },
  onLoad(options) {
    getDictData(options.id).then((res) => (this.model = res));
  },
  mounted() {},
  methods: {
    async handleSubmit(refName) {
      const values = await this.$refs[refName].validate();
      values.dictCode = this.model.dictCode;
      this.$message.loading("提交中...", 0);
      await updateDictData(values);
      setTimeout(() => {
        this.$tab.navigateBack();
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.update {
  width: 100%;
  min-height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 16px;
}
</style>
